import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import App from '../App'
import Fast from '../views/Fast'
import Home from '../views/Home'
import Login from '../views/Login'
import Practice from '../views/Practice'
import PracticeList from '../views/PracticeList'
import Register from '../views/Reg'
import User from '../views/User'

const routes = [
  {
    path: '/', component: App,
    children: [
      { path: '/home', component: Home },
      { path: '/fast', component: Fast },
      { path: '/user', component: User },
      { path: '/login', component: Login },
      { path: '/reg', component: Register },
      { path: '/practice/:code', component: Practice },
      { path: '/practicelist', component: PracticeList },
    ]
  },
]

// const router = () => (
//   <Router>
//     <Switch>
//       <Route path="/" component={() => (
//         <App>
//           <Switch>
//             <Route exact path="/home" component={Home}></Route>
//           </Switch>
//           <Switch>
//             <Route exact path="/fast" component={Fast}></Route>
//           </Switch>
//           <Switch>
//             <Route exact path="/user" component={User}></Route>
//           </Switch>
//           <Switch>
//             <Route exact path="/reg" component={Register}></Route>
//           </Switch>
//           <Switch>
//             <Route exact path="/login" component={Login}></Route>
//           </Switch>
//         </App>
//       )}>
//       </Route>
//     </Switch>
//   </Router>
// )

const router = () => {
  return (
    <Router>
      {
        routes.map(item => {
          return (
            <Switch key={item.path}>
              <Route path={item.path} component={() => (
                <item.component>
                  {
                    item.children ? item.children.map(child => {
                      return (
                        <Switch key={child.path}>
                          <Route path={child.path} exact component={child.component}></Route>
                        </Switch>
                      )
                    }) : ''
                  }
                </item.component>
              )}>
              </Route>
            </Switch>
          )
        })
      }
    </Router>
  )
}

export default router